<template>
  <div class="btn-container">
    <div class="wrap">
      <div
        v-for="(item,index) of options"
        :key="index"
        :class="checked === item.value ? 'active btn' : 'btn'"
        @click="onChange(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectButton',
  props: {
    options: {
      type: Array,
      default: () => ({})
    },
    checked: {
      type: String,
      default: () => {
      }
    },
    onChange: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="scss" scoped>
	.btn-container {
		width: 100%;
		box-sizing: border-box;

		.wrap {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.btn {
			border: 1px solid #E7E7E7;
			background-color: #ffffff;
			font-size: 0.3rem;
			color: #363636;
			text-align: center;
			width: 1.8rem;
			height: 0.5rem;
			line-height: 0.5rem;
			margin-right: 0.2rem;
		}

		.btn.active {
			background: #2090E7;
			color: #fff;
		}

		/deep/ .van-button--normal {
			width: 2rem;
			height: 0.5rem;
			line-height: 0.5rem;
			font-size: 0.3rem;
			margin-right: 0.2rem;
		}

		.triangle-t-l {
			width: 0;
			height: 0;
			/*border-top-width: 0.5rem;*/
			/*border-top-color: #868686;*/
			/*border-top-style: solid;*/
			border-top: 0.5rem solid #007AFF;
			border-left: 1rem solid #007AFF;
			border-right: 0.8rem solid transparent;
		}

		.triangle-b-r {
			width: 0;
			height: 0;
			border-bottom: 0.5rem solid #007AFF;
			border-left: 1rem solid transparent;
			border-right: 0.8rem solid #007AFF;
		}

		.triangle-t-l.active {
			border-top-color: #007AFF;
		}

		.triangle-b-r.active {
			border-bottom-color: #007AFF;
		}

		.span-label {
			position: absolute;
			top: 0;
			left: 0;
		}
	}
</style>

